<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据备份</el-breadcrumb-item>
    </el-breadcrumb>

    <!--列表-->
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-button size="small" icon="el-icon-plus" type="primary" @click="backup">备份</el-button>
        </el-col>
      </el-row>


      <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="backupId" label="备份ID" v-if="false">
        </el-table-column>
        <el-table-column prop="tosId" label="tosID" v-if="false">
        </el-table-column>

        <el-table-column prop="groupName" label="Baas服务名称" width="500">
        </el-table-column>
        <el-table-column sortable prop="createTime" label="创建时间" width="500">
          <template slot-scope="scope">
            <div>{{scope.row.createTime|timestampToTime}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="150">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope.$index, scope.row)">还原</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 列表数据
      listData: [],
      // 列表是否加载
      loading: false,

    }
  },
  methods: {
    // 备份
    backup() {
      this.$message({
        type: 'success',
        message: '备份成功!'
      });
    },
    // 还原
    handleEdit(index, row) {
      this.$message({
        type: 'success',
        message: '还原成功!'
      });
    },
    // 列表数据
    getdata() {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        data: [
          {
            backupId:'123',
            tosId: '321',
            groupName: '溯源Baas服务',
            createTime: '2021-10-25'
          },
          {
            backupId:'456',
            tosId: '654',
            groupName: '探马Baas服务',
            createTime: '2021-08-16'
          },
          {
            backupId:'789',
            tosId: '987',
            groupName: '珍客Baas服务',
            createTime: '2021-11-03'
          }
        ]
      }
      this.loading = false
      this.listData = res.data
    },
  },

  created() {
    this.getdata(this.formInline)
  },
}
</script>

<style scoped>
.el-row {margin: 0 0 15px 0;}
.el-card {margin: 15px 0;}
</style>
